<template>
  <div>
    <Header>
      <el-input
        v-model="search"
        placeholder="请输入内容"
        size="small"
        class="heads-select-input"
      >
        <el-select
          slot="prepend"
          v-model="select"
          style="width: 100px;"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in selectOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getInfo()"
        ></el-button>
      </el-input>
      <div class="heads-screen">
        <div class="heads-screen-name">
          用户身份
        </div>
        <div class="heads-screen-btns">
          <el-button
            v-for="(item, index) in checkboxOptions"
            :key="index"
            size="small"
            @click="getInfo(item.value)"
          >
            {{ item.label }}
          </el-button>
        </div>
        <!-- <el-checkbox-group size="small"
                               class="heads-screen-checkbox"
                               v-model="checkboxVal">
              <el-checkbox v-for="(item,index) in checkboxOptions"
                           :key="index"
                           :label="item.value"
                           @change="checkboxTag(item.value,$event)"
                           border>{{item.label}}</el-checkbox>
            </el-checkbox-group> -->
        <div class="heads-screen-btn">
          <el-button type="text" @click="showTag('showField')"
            >设置显示字段</el-button
          >
          <!-- <el-button type="text" @click="showTag('showSenior')"
            >高级筛选</el-button
          > -->
        </div>
      </div>
      <div class="heads-operation">
        <div class="heads-operation-name">
          筛选条件
        </div>
        <el-button
          v-for="(item, index) in btnList"
          :key="index"
          size="small"
          @click="showTag(item.value)"
        >
          {{ item.label }}
        </el-button>
      </div>
    </Header>
    <Main
      :data="listData"
      :footer-lock="totals > 10"
      :row-key="getRowKeys"
      @selection-change="handleSelectionChange"
    >
      <el-table-column width="30" :reserve-selection="true" type="selection">
      </el-table-column>
      <el-table-column label="用户头像" fixed min-width="180" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.cover">
            <img
              style="width:40px;height:40px;color:black;"
              :src="
                $store.state.qiniu + scope.row.cover + $store.state.imgRotate
              "
            />
          </span>
          <span v-else>暂无头像</span>
        </template>
      </el-table-column>
      <el-table-column
        label="用户昵称"
        fixed
        min-width="180"
        align="center"
        property="nick_name"
      ></el-table-column>
      <el-table-column label="用户电话" min-width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone ? scope.row.phone : "暂未绑定手机" }}
        </template>
      </el-table-column>
      <el-table-column
        label="成为客户时间"
        align="center"
        min-width="180"
        property="create_at"
      ></el-table-column>
      <el-table-column
        label="上级名称"
        align="center"
        min-width="180"
        property="up_nick_name"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :label="item.label"
        align="center"
        min-width="180"
        :property="item.val"
      ></el-table-column>
      <!-- <el-table-column label="用户状态"
                             align='center'
                             :width='tableColumn.length>0?180:323'
                             property="status"></el-table-column> -->
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="200"
        class-name="tableoperation"
      >
        <template>
          <el-button size="mini" type="text"> 详情 </el-button>
          <el-button size="mini" type="text"> 充值 </el-button>
          <el-button size="mini" type="text"> 消费 </el-button>
          <el-button size="mini" type="text"> 修改会员等级 </el-button>
          <el-button size="mini" type="text"> 修改积分 </el-button>
        </template>
      </el-table-column>
    </Main>
    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        :current-page="pages"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>
    <show-field
      :visible="visible === 'showField'"
      :val="showFieldVal"
      @outDialog="outDialog"
    />
    <show-senior :visible="visible === 'showSenior'" @outDialog="outDialog" />
    <show-edit-level
      :visible="visible === 'showEditLevel'"
      @outDialog="outDialog"
    />
    <show-set-black
      :visible="visible === 'showSetBlack'"
      :val="showSetBlackVal"
      @outDialog="outDialog"
    />
  </div>
</template>
<script>
import { APPMEMBERLIST } from "../service";

export default {
  components: {
    showField: () => import("./component/showField"),
    showSenior: () => import("./component/showSenior"),
    showEditLevel: () => import("./component/showEditLevel"),
    showSetBlack: () => import("./component/showSetBlack")
  },
  data() {
    return {
      search: "",
      select: "",
      selectOptions: [
        { label: "全部", value: "all" },
        { label: "手机号", value: "phone" },
        { label: "微信昵称", value: "nick_name" },
        { label: "姓名", value: "name" }
      ],
      listData: [],
      allList: [],
      getRowKeys(row) {
        return row.member_id;
      },
      totals: 0,
      pages: 1,
      // checkboxVal: [],
      checkboxOptions: [
        { label: "不限", value: 0 },
        { label: "游客", value: 1 },
        { label: "购买用户", value: 2 },
        { label: "会员", value: 3 }
        // { label: '分销员', value: 4 }
      ],
      btnList: [
        // { label: "修改会员等级", value: "showEditLevel" },
        // { label: "修改积分", value: "level" },
        // { label: "送优惠劵", value: "level" },
        // { label: '修改分销关系链', value: 'level' },
        // { label: '修改分销等级', value: 'level' },
        // { label: "手动发放会员卡", value: "level" },
        { label: "黑名单", value: "showSetBlack" }
      ],
      visible: "",
      showFieldVal: {},
      showSetBlackVal: [],
      tableColumn: [],
      tableVal: {}
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    handleSelectionChange(v) {
      this.allList = v;
    },
    // checkboxTag (val, e) {
    //   if (!e) return
    //   if (val === 0) {
    //     this.checkboxVal = [0]
    //   } else {
    //     let idx = this.checkboxVal.findIndex(ele => ele === 0)
    //     if (idx !== -1) {
    //       this.checkboxVal.splice(idx, 1)
    //     }
    //   }
    // },
    async getInfo(condition) {
      await APPMEMBERLIST({
        page: this.pages,
        pageshow: 10,
        search: this.search,
        filter: this.select,
        condition
      }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.totals = data.count;
          data.list.forEach(item => {
            if (!item.nick_name) {
              item.nick_name = `游客${parseInt(
                Math.random() * (1000000 + 1),
                10
              )}`;
            }
          });
          this.listData = data.list;
        } else {
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getInfo();
    },
    showTag(name) {
      switch (name) {
        case "showField":
          this.showFieldVal = this.tableVal;
          break;
        case "showSetBlack":
          this.showSetBlackVal = this.allList;
          break;
      }
      this.visible = name;
    },
    outDialog(name, req, val) {
      if (val) {
        switch (name) {
          case "showField":
            this.tableColumnT(val);
            break;
          case "showSenior":
            break;
          case "showEditLevel":
            break;
          case "showSetBlack":
            break;
        }
      }
      if (req) {
        this.getInfo();
      }
      this.visible = "";
    },
    tableColumnT(val) {
      val.listA = val.listA.sort();
      val.listB = val.listB.sort();
      this.tableColumn = [];
      val.listA.forEach(ele => {
        switch (ele) {
          case 1:
            this.tableColumn.push({
              label: "最近消费时间",
              val: "recent_consumption_time"
            });
            break;
          case 2:
            this.tableColumn.push({
              label: "消费金额（元）",
              val: "total_price"
            });
            break;
          case 3:
            this.tableColumn.push({
              label: "消费次数（次）",
              val: "countc"
            });
            break;
          case 4:
            this.tableColumn.push({
              label: "充值金额（元）",
              val: "need_pay"
            });
            break;
          case 5:
            this.tableColumn.push({
              label: "充值次数（次）",
              val: "counts"
            });
            break;
        }
      });
      val.listB.forEach(ele => {
        switch (ele) {
          case 1:
            this.tableColumn.push({
              label: "当前积分",
              val: "allsign"
            });
            break;
          case 2:
            this.tableColumn.push({
              label: "累计积分",
              val: "totalsign"
            });
            break;
          case 3:
            this.tableColumn.push({
              label: "当前余额（元）",
              val: "storage"
            });
            break;
          case 4:
            this.tableColumn.push({
              label: "累计余额（元）",
              val: "allmoney"
            });
            break;
        }
      });
      this.tableVal = val;
    }
  }
};
</script>
<style lang="scss" scoped>
.heads-select-input {
  width: 30%;
}
.heads-screen {
  width: 100%;
  height: 48px;
  // display: flex;
  // padding-bottom: 14px;
  margin: 14px 0;
  border-bottom: 1px solid #cecece;
  .heads-screen-name {
    width: 78px;
    height: 100%;
    line-height: 30px;
    float: left;
  }
  .heads-screen-btns {
    float: left;
  }
  .heads-screen-checkbox {
    width: 80%;
    height: 100%;
  }
  .heads-screen-btn {
    width: 16%;
    line-height: 30px;
    height: 100%;
    float: right;
    text-align: right;
  }
}
.heads-operation {
  width: 100%;
  height: 34px;
  .heads-operation-name {
    width: 78px;
    height: 100%;
    line-height: 30px;
    display: inline-block;
  }
}
.manageWrap {
  padding: 20px;
  background: #fff;
  overflow-y: auto;
  .manageHead {
    p {
      padding: 20px 0;
      font-weight: bold;
      color: #000;
      text-align: left;
    }
    .manageTit {
      background: #ffffff;
      border: 10px solid #f3f3f3;
      padding: 20px;
      font-weight: bold;
      font-size: 14px;
      border-radius: 6px;
      color: #595961;
    }
  }
}
.container {
  color: #595961;
  border: 10px solid #f3f3f3;
  border-radius: 6px;
  padding: 16px 30px;
  margin-bottom: 20px;
  margin-top: -20px;
  text-align: center;
  background: #fff;
}
.container :last-child {
  margin-bottom: 0;
}
</style>
